<template>
	<view class="page index">
		<empty v-if="empty" desc="该项目已删除"></empty>
		<block v-else>
			<view class="project-sheet">
				<view class="header">
					<view class="left">
						{{detail.name}}
					</view>
					<view class="right" :style="{color: `${detail.color}`, borderColor: `${detail.color}`}">
						{{detail.statusText}}
					</view>
				</view>
				<view class="details">
					<view class="det-item">
						<view class="tag">
							项目类型
						</view>
						<view class="value">
							{{detail.typeText}}
						</view>
					</view>
					<view class="det-item">
						<view class="tag">
							项目等级
						</view>
						<view class="value">
							{{detail.levelText}}
						</view>
					</view>
					<view class="det-item">
						<view class="tag">
							项目负责人
						</view>
						<view class="value">
							{{detail.ownerUserName || ''}}
						</view>
					</view>
				</view>
				<view class="progress">
					<view :class="['pro-item', currentProgress >= index ? currentProgress > index ? 'complate' : 'current' : '']" v-for="(item, index) in progress" :key="index">
						<span class="text">{{item}}</span>
						<span class="icon">
							<uni-icons type="right" size="26rpx" color="#BFBFBF"></uni-icons>
						</span>
					</view>
				</view>
				<view class="bottom">
					<navigator :url="'/pages/index/customer/details?id=' + detail.customerId" class="list-item" hover-class="none">
						<view class="left">
							<span class="iconfont icon" style="color: #de868f;">&#xe6ec;</span>
							<view class="title">
								{{detail.customerName || ''}}
							</view>
						</view>
						<view class="right">
							<uni-icons type="right" size="20" color="#101010"></uni-icons>
						</view>
					</navigator>
				</view>
			</view>
			<view class="tab-list">
				<view :class="['tab-item', tabIndex == index && 'tab-select']" v-for="(item, index) in tabList" :key="index" @click="tabIndex = index">
					{{item}}
				</view>
			</view>
			<view class="container">
				<follow-records v-if="tabIndex == 0" ref="fellowChild" :projectId="id" :name="detail.name"></follow-records>
				<project-progress v-if="tabIndex == 1" :projectId="id"></project-progress>
				<project-message v-if="tabIndex == 2" :message="detail"></project-message>
				<project-relevant v-if="tabIndex == 3" :project="detail" @transfer="transferProject"></project-relevant>
			</view>
			<view class="footer">
				<button @click="implementation" v-if="currentProgress < 2">实施</button>
				<button @click="deliver" v-if="currentProgress >= 2">交付</button>
				<button @click="document" v-if="detail.status != 1 && detail.status != 2">归档</button>
				<button @click="moreOperation">更多</button>
			</view>
		</block>
		<!-- 更多操作 -->
		<uni-popup ref="projectOperation" type="center">
			<view class="more-operation">
				<view class="operation-item" @click="edit">
					<span class="iconfont icon" style="color: #101010;">&#xe8ac;</span>
					<span>编辑任务</span>
				</view>
				<view v-if="detail.status == 1" class="operation-item" @click="restoreProject">
					<span class="iconfont icon" style="color: #101010;">&#xe61b;</span>
					<span>恢复任务</span>
				</view>
				<view v-if="detail.status == 0" class="operation-item" @click="suspendProject">
					<span class="iconfont icon" style="color: #101010;">&#xe612;</span>
					<span>暂停任务</span>
				</view>
				<view v-if="detail.status != 2" class="operation-item" @click="cancelProject">
					<span class="iconfont icon" style="color: #101010;">&#xe753;</span>
					<span>作废任务</span>
				</view>
				<view v-if="currentProgress <= 1 || detail.status == 2" class="operation-item" @click="deleteProject">
					<span class="iconfont icon" style="color: #101010;">&#xe603;</span>
					<span>删除任务</span>
				</view>
				<view class="operation-item" @click="transferProject">
					<span class="iconfont icon" style="color: #101010;">&#xe610;</span>
					<span>移交任务</span>
				</view>
			</view>
		</uni-popup>
		<!-- 移交项目弹出框 -->
		<uni-popup ref="transferProject" type="center">
			<view class="transfer-project">
				<view class="top">
					<view class="title">
						移交项目
					</view>
					<picker mode="selector" @change="changeUser" :value="userIndex" :range="userList">
						<common-input
						  title="接收人" 
							placeholder="请选择接收人" 
							v-model="userIndex < 0 ? '' : userList[userIndex]"
							:require="false"
							:disabled="true"
							:select="true"
							:boderTop="false"
							:border-bottom="false"
						>
						</common-input>
					</picker>
					<!-- <picker mode="selector" :value="index" :range="range" @change="changeIndex">
						<view class="picker">
							<common-input
							  title="移交人是否退出团队" 
								v-model="range[index]"
								:require="false"
								:disabled="true"
								:select="true"
							  :boderTop="false"
							>
							</common-input>
						</view>
					</picker> -->
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.transferProject.close()">取消</button>
					<button class="confire" @click="confireTransfrt">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 恢复项目 -->
		<uni-popup ref="recoverProject" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						恢复项目
					</view>
					<view class="content">
						确定要结束暂停恢复项目吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.recoverProject.close()">取消</button>
					<button class="confire" @click="confireRecover">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 暂停项目 -->
		<uni-popup ref="stopProject" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						暂停项目
					</view>
					<view class="content">
						确定要暂停项目吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.stopProject.close()">取消</button>
					<button class="confire" @click="confireStop">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 作废项目 -->
		<uni-popup ref="repealProject" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						作废项目
					</view>
					<view class="content">
						确定要作废项目吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.repealProject.close()">取消</button>
					<button class="confire" @click="confireRepeal">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 删除项目 -->
		<uni-popup ref="cancelProject" type="center">
			<view class="model-popup">
				<view class="top">
					<view class="title">
						删除项目
					</view>
					<view class="content">
						删除后无法恢复，确定要删除该项目吗？
					</view>
				</view>
				<view class="bottom">
					<button class="cancle" @click="$refs.cancelProject.close();">取消</button>
					<button class="confire" @click="confireCancel">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import followRecords from "./components/followRecords.vue";
	import projectProgress from "./components/projectProgress.vue";
	import projectMessage from "./components/projectMessage.vue";
	import projectRelevant from "./components/projectRelevant.vue";
	import commonInput from "@/components/commonInput.vue";
	import empty from "@/components/empty.vue";
	import {getUserListApi} from "@/api/common.js";
	import {getProjectDetailApi, pauseProjectApi, restoreProjectApi, deleteProjectApi, repealProjectApi, ProjectTransferApi} from "@/api/project_api.js";
	export default{
		components: {
			followRecords,
			projectProgress,
			projectMessage,
			projectRelevant,
			commonInput,
			empty
		},
		data(){
			return{
				empty: false,
				currentProgress:0,
				progress:['意向', '签约', '实施', '交付', '回款','归档'],//进度
				tabList:[ '跟进记录', '实施进展', '基本信息', '相关信息'],
				tabIndex:0,
				userIndex: -1,
				userList: ['未获取到接收人列表'],
				userId: [],
				index:0,
				range:['否', '是'],
				id:0,//项目id
				detail: {},//项目详情
			}
		},
		onLoad(e) {
			this.id = e.id;
		},
		onShow() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			this.getProjectDetail();
			this.$refs.fellowChild.onShowMethod(this.id);
		},
		methods:{
			// 获取项目详情
			async getProjectDetail(){
				let res = await getProjectDetailApi(this.id).catch(() => {
					uni.hideLoading();
					return Promise.reject();
				})
				this.detail = res.data;
				this.currentProgress = res.data.stage;
				let typeText = '';
				let levelText = '';
				let statusText = '';
				let color = '';
				switch(this.detail.type){
					case 0: {
						typeText = '产品开发类';
						break;
					}
					case 1: {
						typeText = '运维服务类';
						break;
					}
					case 2: {
						typeText = '设备销售类';
						break;
					}
				}
				switch(this.detail.level){
					case 0: {
						levelText = 'A（重要）';
						break;
					}
					case 1: {
						levelText = 'B（关注）';
						break;
					}
					case 2: {
						levelText = 'C（一般）';
						break;
					}
				}
				switch(this.detail.status){
					case 0: {
						statusText = '进行';
						color = '#3388FF';
						break;
					}
					case 1: {
						statusText = '暂停';
						color = '#DE868F';
						break;
					}
					case 2: {
						statusText = '作废';
						color = '#C9C9C9';
						break;
					}
					case 3: {
						statusText = '正常完结';
						color = '#3BBF03';
						break;
					}
					case 4: {
						statusText = '异常完结';
						color = '#951D1D';
						break;
					}
				}
				this.$set(this.detail, 'typeText', typeText);
				this.$set(this.detail, 'levelText', levelText);
				this.$set(this.detail, 'statusText', statusText);
				this.$set(this.detail, 'color', color);
				await uni.hideLoading();
			},
			//实施
			implementation(){
				if(this.currentProgress < 1){
					uni.navigateTo({
						url: `/pages/index/project/unSigned?id=${this.id}`
					})
				}else if(this.currentProgress == 1){
					uni.navigateTo({
						url: `/pages/index/project/signed?id=${this.id}`
					})
				}
				
			},
			// 交付
			deliver(){
				uni.navigateTo({
					url:`/pages/index/project/deliver?id=${this.id}&customerId=${this.detail.customerId}`
				})
			},
			// 归档
			document(){
				uni.navigateTo({
					url: `/pages/index/project/documentation?id=${this.id}&fileAbnormalReason=${this.detail.fileAbnormalReason}`
				})
			},
			// 更多操作
			moreOperation(){
				this.$refs.projectOperation.open();
			},
			// 编辑
			edit(){
				this.$refs.projectOperation.close();
				uni.navigateTo({
					url: `/pages/index/project/edit?detail=${JSON.stringify(this.detail)}`
				})
			},
			// 暂停任务
			suspendProject(){
				if(this.detail.stage == 0 || this.detail.stage == 1){
					this.$refs.stopProject.open();
				}else{
					uni.navigateTo({
						url: `/pages/index/project/suspend?id=${this.id}&progress=${this.progress[this.currentProgress]}`
					})
				}
				this.$refs.projectOperation.close();
			},
			confireStop(){
				this.$refs.stopProject.close();
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				pauseProjectApi(this.id).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
					this.getProjectDetail();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 恢复任务
			restoreProject(){
				this.$refs.recoverProject.open();
				this.$refs.projectOperation.close();
			},
			confireRecover(){
				this.$refs.recoverProject.close();
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				restoreProjectApi(this.id).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
					this.getProjectDetail();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 作废项目
			cancelProject(){
				if(this.currentProgress <= 1){
					this.$refs.repealProject.open();
				}else{
					uni.navigateTo({
						url:`/pages/index/project/cancelProject?id=${this.id}&progress=${this.progress[this.currentProgress]}`
					})
				}
				this.$refs.projectOperation.close();
			},
			confireRepeal(){
				this.$refs.repealProject.close();
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				repealProjectApi(this.id).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
					this.getProjectDetail();
				}).catch(() => {
					uni.hideLoading();
				})
			},
			// 删除项目
			deleteProject(){
				this.$refs.cancelProject.open();
				this.$refs.projectOperation.close();
			},
			confireCancel(){
				this.$refs.cancelProject.close();
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				this.empty = false;
				deleteProjectApi(this.id).then(() => {
					this.empty = true;
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}).catch(() => {
					uni.hideLoading();
				})
			},
			//移交任务
			transferProject(){
				this.$refs.transferProject.open();
				this.$refs.projectOperation.close();
				getUserListApi().then((res) => {
					res.data = res.data.filter(item => item.id != this.detail.ownerUserId);
					this.userList = res.data.map(item => item.nickname);
					this.userId = res.data.map(item => item.id);
				})
			},
			changeUser(e){
				this.userIndex = e.detail.value;
			},
			changeIndex(e){
				this.index = e.detail.value;
			},
			confireTransfrt(){
				this.$refs.transferProject.close();
				if(this.userIndex < 0 || this.userId.length == 0){
					uni.showToast({
						icon: 'none',
						title: '接收人不能为空'
					})
				}
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				ProjectTransferApi({
					id: this.id,
					newOwnerUserId: this.userId[this.userIndex]
				}).then(() => {
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: '操作成功'
					})
				}).catch(() => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		padding: 24rpx 0;
		.project-sheet{
			flex: 0 0 auto;
			@include box;
			@include list;
			margin: 0 28rpx;
			.progress{
				@include flex-r-between-center;
				height: 52rpx;
				border-radius: 6rpx;
				background-color: #F3F6F9;
				padding: 0 24rpx;
				.pro-item{
					@include flex-r-start-center;
					font-size: 24rpx;
					color: #9A9A9A;
					&:last-child{
						.icon{
							display: none;
						}
					}
					.icon{
						padding: 4rpx 0 0 18rpx;
					}
					&.complate{
						.text{
							color: #81B337;
						}
					}
					&.current{
						.text{
							color: #4095E5;
						}
					}
				}
			}
			.bottom{
				padding: 16rpx 0 24rpx;
				.list-item{
					@include flex-r-between-center;
					border-top: #d8d8d8 4rpx solid;
					height: 84rpx;
					.left{
						@include flex-r-start-center;
						.icon{
							font-size: 44rpx
						}
						.title{
							font-size: 32rpx;
							color: #40a4ec;
							padding-left: 20rpx;
							
						}
					}
				}
			}
		}
		.tab-list{
			flex: 0 0 auto;
			@include flex-r-evely-center;
			padding: 34rpx 28rpx 0;
			.tab-item{
				color: #101010;
				font-size: 28rpx;
				text-align: center;
				&::after{
					content: '';
					display: block;
					width: 120rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: transparent;
					margin-top: 10rpx;
				}
				&.tab-select{
					color: #1684fc;
					&::after{
						background-color: #1684fc;
					}
				}
			}
		}
		.container{
			flex: 1 0 0;
			overflow: auto;
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 30rpx 0;
			@include flex-r-evely-center;
			button{
				@include button;
				color: #fff;
				width: 30%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				background-color: #198AFA;
			}
		}
		// 更多操作弹出框样式
		.more-operation{
			width: 400rpx;
			background-color: #fff;
			@include box;
			.operation-item{
				@include flex-r-center-center;
				font-size: 28rpx;
				line-height: 100rpx;
				border-bottom: #d0d0d0 4rpx solid;
				&:last-child{
					border-bottom: none;
				}
				.icon{
					padding-right: 20rpx;
				}
			}
		}
		//移交项目弹出框样式
		.transfer-project{
			width: 100%;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 0;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 34rpx;
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 120rpx;
					line-height: 120rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancle{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
		//对话框样式
		.model-popup{
			width: 600rpx;
			background-color: #fff;
			@include box;
			border-radius: 16rpx;
			.top{
				padding: 24rpx 40rpx 56rpx;
				.title{
					color: #101010;
					font-size: 36rpx;
					text-align: center;
					padding: 0 0 34rpx;
				}
				.content{
					color: #747474;
					font-size: 28rpx;
					text-align: center;
				}
			}
			.bottom{
				@include flex-r;
				border-top: 4rpx #F0F0F2 solid;
				button{
					@include button;
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-color: #fff;
					border-radius: 0;
				}
				.cancle{
					color: #BBBBBB;
					border-right: 4rpx #F0F0F2 solid;
				}
				.confire{
					color: #4095E5;
				}
			}
		}
	}
</style>